<template>
<!--  <NavBar />-->
  <div class="header-wrap">
    <div class="header-content">
      <div class="logo-line">
        <img src="@/assets/images/moral/img.png" alt="Logo" class="logo" />
      </div>
    </div>
    <ElMenu class="menu-container" mode="horizontal" :default-active="activeMenu">
      <ElMenuItem index="1">
        <img src="@/assets/images/moral/small/img.png" alt="Icon 1" class="menu-icon" />
        党史学习
      </ElMenuItem>
      <ElMenuItem index="2">
        <img src="@/assets/images/moral/small/img_1.png" alt="Icon 2" class="menu-icon" />
        爱国主义
      </ElMenuItem>
      <ElMenuItem index="3">
        <img src="@/assets/images/moral/small/img_2.png" alt="Icon 3" class="menu-icon" />
        宪法法治
      </ElMenuItem>
      <ElMenuItem index="4">
        <img src="@/assets/images/moral/small/img_3.png" alt="Icon 4" class="menu-icon" />
        品德教育
      </ElMenuItem>
      <ElMenuItem index="5">
        <img src="@/assets/images/moral/small/img_4.png" alt="Icon 5" class="menu-icon" />
        思政课程
      </ElMenuItem>
      <ElMenuItem index="6">
        <img src="@/assets/images/moral/small/img_5.png" alt="Icon 6" class="menu-icon" />
        优秀传统文化
      </ElMenuItem>
      <ElMenuItem index="7">
        <img src="@/assets/images/moral/small/img_6.png" alt="Icon 7" class="menu-icon" />
        生命与安全
      </ElMenuItem>
      <ElMenuItem index="8">
        <img src="@/assets/images/moral/small/img_7.png" alt="Icon 8" class="menu-icon" />
        心理健康
      </ElMenuItem>
      <ElMenuItem index="9">
        <img src="@/assets/images/moral/small/img_8.png" alt="Icon 9" class="menu-icon" />
        生态文明
      </ElMenuItem>
    </ElMenu>

    <div class="container">
  <div class="common-layout">
    <div class="views-container"> <!-- 新增容器 -->
      <img src="@/assets/images/moral/small/img.png" alt="Icon" class="views-icon" />
      <p class="views-p">党史学习</p>
    </div>
    <el-container>
      <el-aside width="600px">
        <div class="left-video">
          <Card
              v-if="videos.length > 0"
              :key="videos[0].resourceId"
              :resourceId="videos[0].resourceId"
              class="video-card main-card"
              @click="playVideo(videos[0].resourceId)"
          />
        </div>
      </el-aside>
      <el-main>
        <div class="right-videos">
          <div class="video-list">
            <div
                v-for="(video, index) in videos.slice(1, 4)"
                :key="video.resourceId"
                class="video-item"
            >
              <Card
                  :resourceId="video.resourceId"
                  class="video-card sub-card"
                  @click="playVideo(video.resourceId)"
              />
              <p class="video-description">{{ video.description }}</p>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</div>
    <div class="container">
      <div class="common-layout">
        <div class="views-container"> <!-- 新增容器 -->
          <img src="@/assets/images/moral/small/img_1.png" alt="Icon" class="views-icon" />
          <p class="views-p">爱国主义</p>
        </div>
        <el-container>
          <el-aside width="600px">
            <div class="left-video">
              <Card
                  v-if="videos.length > 0"
                  :key="videos[0].resourceId"
                  :resourceId="videos[0].resourceId"
                  class="video-card main-card"
                  @click="playVideo(videos[0].resourceId)"
              />
            </div>
          </el-aside>
          <el-main>
            <div class="right-videos">
              <div class="video-list">
                <div
                    v-for="(video, index) in videos.slice(1, 4)"
                    :key="video.resourceId"
                    class="video-item"
                >
                  <Card
                      :resourceId="video.resourceId"
                      class="video-card sub-card"
                      @click="playVideo(video.resourceId)"
                  />
                  <p class="video-description">{{ video.description }}</p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>







  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { resourceApi } from '@/api/resourceApi'; // 引入资源 API
import Card from "@/components/CardTwo.vue"; // 导入 Card 组件

// 引入图片
import img0 from '@/assets/images/course/teacher/carousel/img_0.png';
import img1 from '@/assets/images/course/teacher/carousel/img_1.png';
import img2 from '@/assets/images/course/teacher/carousel/img_2.png';
import {useRouter} from "vue-router";

// 选中菜单
const activeMenu = ref('subject'); // 默认显示学科课程内容
const setActiveMenu = (menu: string) => {
  activeMenu.value = menu; // 设置当前活动菜单
};

// 使用反应式数据
const images = ref([img0, img1, img2]);

// 初中的视频资源（示例数据）
const videos = ref([
  { resourceId: 12, description: ''},
  { resourceId: 9, description: '为什么将8月1日定为建军节呢?原来是因为1927年的8月1日发生了' },
  { resourceId: 11, description: '1949年10月1日，开国大典在北京的天安门广场隆重举行。'},
  { resourceId: 13, description: '百年先锋之“两弹一星”先进群体永攀高峰功勋卓著' },
]);

// 图标列表
const iconList = [
  { class: 'icon-activity', smallClass: 'icon-small-activity', smallIcon: '@/assets/images/course/teacher/four/img_1.png', label: '活动报名' },
  { class: 'icon-guide', smallClass: 'icon-small-guide', smallIcon: '@/assets/images/course/teacher/four/login_bg.png', label: '工作指南' },
  { class: 'icon-review', smallClass: 'icon-small-review', smallIcon: '@/assets/images/course/teacher/four/img_3.png', label: '评审入口' },
  { class: 'icon-certificate', smallClass: 'icon-small-certificate', smallIcon: '@/assets/images/course/teacher/four/img_4.png', label: '证书查询' }
];

// 播放视频
const playVideo = (id) => {
  console.log("播放视频 ID:", id);
  // // 这里可以放入实际的播放逻辑，例如跳转到视频播放器等
  // this.$router.push({ name: 'videoPlayer', params: { resourceId: id } });
  const router = useRouter(); // 获取 router 实例
  router.push({ name: 'videoPlayer', params: { resourceId: id } }); // 使用 router 实例
};
</script>

<style scoped>
.header-wrap {
  display: flex;
  flex-direction: column; /* 使内容在垂直方向上排列 */
  align-items: center;
  padding: 20px 20px;
  background-color: #f0f2f5;
}

.header-content {
  display: flex;
  align-items: center;
  width: 100%; /* 宽度设置为100% */
}

.logo-line {
  display: flex;
  align-items: center;
  width: 100%; /* 使 logo line 占满整行 */
  border-radius: 10px;
}

.logo {
  width: 100%; /* 宽度设置为100% */
  height: auto; /* 保持纵横比 */
  border-radius: 10px;
  margin-bottom: 20px;
}

.menu-container {
  display: flex;
  align-items: center;
  border-radius: 10px;
  width: 100%; /* 确保菜单栏占满宽度 */
  flex: 1; /* 使菜单栏填满剩余空间 */
}

.menu-container ElMenuItem {
  font-size: 30px; /* 调整字体大小到适合的值 */
  flex: 1; /* 使菜单项平分剩余空间 */
  text-align: center; /* 文字居中 */
}

.menu-icon {
  width: 24px; /* 调整为适合的宽度 */
  height: 24px; /* 调整为适合的高度 */
  margin-right: 5px; /* 图标和文字之间的间距 */
  vertical-align: middle; /* 垂直对齐 */
}


.left-video {
  display: flex;
  margin-top: 20px;
  margin-left: 30px;
}

.right-videos {
  display: flex;
  flex-direction: column; /* 使右侧视频按照列的方式排列 */
  gap: 10px; /* 增加每个视频之间的间距 */
  margin-left: 20px;
}

.video-list {
  display: flex;
  flex-direction: column; /* 让视频列表垂直排列 */
}

.video-card {
  margin-bottom: 10px; /* 每个卡片的底部间距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: transform 0.2s;
}

.video-card:hover {
  transform: scale(1.05);
}

.main-card {
  width: 100%; /* 主视频卡片宽度为100% */
  height: 300px; /* 放大主视频的高度 */
  weight: 133.76
}

.sub-card {

  height: 90px; /* 设置子视频高度 */
  width: 20%;
}
.video-item {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 10px; /* 每个视频项之间的间距 */
}

.video-card {
  margin-right: 20px; /* 视频卡片和描述之间的间距 */
}

.video-description {
  font-size: 14px; /* 描述的字体大小 */
  color: #666; /* 描述的颜色 */
  line-height: 1.5; /* 行高 */
}

.views-container {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 50px; /* 与其它内容的间距 */
}

.views-icon {
  width: 48px; /* 设置图标的宽度 */
  height: 48px; /* 设置图标的高度 */
  margin-right: 10px; /* 图标和文本之间的间距 */
  margin-left: 30px;
}

.views-p {
  font-size: 32px; /* 文本字体大小 */
  margin: 0; /* 移除margin以适配新的布局 */
}

.container{
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 10px;
}
</style>
